<template>
	<div class="user-info-container">
		<el-card class="profile-card">
			<div class="flex-juctify-center">
				<el-segmented v-model="segmented" :options="segmenteds" />
			</div>

				<div v-if="segmented == '基本信息'" class="info-wapper">
					<el-form ref="basicFormRef" :model="userInfo" :rules="basicRules">
						<el-form-item label="用户名" label-width="100" prop="username">
							<el-input disabled v-model="userInfo.username"/>
						</el-form-item>
						<el-form-item label="邮箱" label-width="100" prop="email">
							<el-input v-model="userInfo.email"/>
						</el-form-item>
						<el-form-item label="密码" label-width="100" prop="password">
							<el-input type="password" placeholder="请输入密码" v-model="userInfo.password" show-password/>
						</el-form-item>
						<el-form-item label="重复密码" label-width="100" prop="password2">
							<el-input type="password" placeholder="请输入密码" v-model="userInfo.password2" show-password/>
						</el-form-item>
						<el-form-item label="" label-width="100">
							<el-button @click="resetForm">重置</el-button>
							<el-button type="primary" @click="submitBasicForm">修改</el-button>
						</el-form-item>
					</el-form>
				</div>

				<div v-if="segmented == '社交信息'"  class="info-wapper">
					<el-form ref="socialFormRef" :model="userInfo.user_info" :rules="socialRules" id="socialFormRef">
						<el-form-item label="微信" label-width="100">
							<el-input v-model="userInfo.user_info.wechat"/>
						</el-form-item>
						<el-form-item label="微博" label-width="100">
							<el-input v-model="userInfo.user_info.weibo"/>
						</el-form-item>
						<el-form-item label="QQ" label-width="100">
							<el-input v-model="userInfo.user_info.qq"/>
						</el-form-item>
						<el-form-item label="地址" label-width="100">
							<el-input v-model="userInfo.user_info.address"/>
						</el-form-item>
						<el-form-item label="电话" label-width="100" prop="phone">
							<el-input v-model="userInfo.user_info.phone"/>
						</el-form-item>
						<el-form-item label="性别" label-width="100" prop="gender">
							<el-select v-model="userInfo.user_info.gender">
								<el-option label="男" value="male"></el-option>
								<el-option label="女" value="female"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="头像" label-width="100" prop="avatar">
							<avatar-uploader v-model="userInfo.user_info.avatar"/>
						</el-form-item>
						<el-form-item label="" label-width="100">
							<el-button @click="resetForm">重置</el-button>
							<el-button type="primary" @click="submitSocialForm">修改</el-button>
						</el-form-item>
					</el-form>
				</div>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue'
import {ElMessage} from 'element-plus'
import {Plus} from '@element-plus/icons-vue'
import {useUserConfig} from '/@/stores/UserInfoConfig'
import {updateUser} from '/@/api/admin'
import AvatarUploader from '/@/components/Avatar_Uploader/Index.vue'
import {getUserInfo, change_user_info} from '/@/api/hz-system-api'
import { type FormInstance, type FormRules } from 'element-plus'
import {useMessage} from "/@hooks/message";
import {useRouter} from "vue-router";

const router = useRouter()
const store = useUserConfig()

const segmented = ref('基本信息')
const segmenteds = ref(['基本信息', '社交信息'])


const userInfo = ref({})

const getUser = async ()=> {
	const res = await getUserInfo(store.userInfo.id)
	userInfo.value = res.data
	if(!res.data?.user_info){
		userInfo.value.user_info = {
			avatar: '',
			gender: '',
			phone: '',
			address: '',
			weibo: '',
			wechat: '',
			qq: ''
		}
	}
}
getUser()


// 表单ref
const basicFormRef = ref<FormInstance>()
const socialFormRef = ref<FormInstance>()
// 验证规则
const basicRules = reactive<FormRules>({
	email: [
		{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
		{
			type: 'email',
			message: '请输入正确的邮箱格式',
			trigger: ['blur', 'change']
		}
	],
	password: [
		{ min: 6, message: '密码长度至少6位', trigger: 'blur' }
	],
	password2: [
		{
			validator: (rule, value, callback) => {
				if (value !== userInfo.value.password) {
					callback(new Error('两次输入密码不一致!'))
				} else {
					callback()
				}
			},
			trigger: 'blur'
		}
	]
})

const socialRules = reactive<FormRules>({
	phone: [
		{
			pattern: /^1[3-9]\d{9}$/,
			message: '请输入有效的手机号码',
			trigger: 'blur',
			required: true
		}
	],
	gender: [
		{ required: true, message: '请选择性别', trigger: 'change' }
	],
	avatar: [
		{ required: true, message: '请上传头像', trigger: 'change' }
	]
})

// 提交处理
const submitBasicForm = async (formEl: FormInstance | undefined) => {
	if (!basicFormRef.value) return
	await basicFormRef.value.validate((valid) => {
		if (valid) {
			// 调用更新接口
			let obj = {
				...userInfo.value
			}
			obj.is_active = obj.is_active ? 'True' : 'False'
			obj.is_staff = obj.is_staff ? 'True' : 'False'
			obj.is_superuser = obj.is_superuser ? 'True' : 'False'
			updateUser(obj).then((res) => {
				useMessage().success('更新成功,请重新登录!')
				setTimeout(()=> {
					router.replace({path: '/auth/login'})
				}, 2000)
			})
		}
	})
}

const fileChange = (file: File) => {
	userInfo.value.user_info.avatar = file
}

const submitSocialForm = async (formEl: FormInstance | undefined) => {
	if(!/^1[3-9]\d{9}$/.test(userInfo.value.user_info.phone)){
		useMessage().error('请输入有效的手机号!')
		return
	}
	if(!userInfo.value.user_info.gender){
		useMessage().error('请选择性别!')
		return
	}
	if(!userInfo.value.user_info.avatar){
		useMessage().error('请上传头像!')
		return
	}

	change_user_info(userInfo.value.user_info, userInfo.value.id).then(() => {
		useMessage().success('更新成功,请重新登录!')
		setTimeout(()=> {
			router.replace({path: '/auth/login'})
		}, 2000)
	})
}

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.resetFields()
}
</script>

<style scoped lang="scss">
.flex-item-center{
	display: flex;
	align-items: center;
}
.flex-juctify-center{
	display: flex;
	justify-content: center;
}

.user-info-container {
	padding: 20px;
	.profile-card {
		margin: 0 auto;
		max-width: 800px;
		padding: 0 100px;

		.info-wapper{
			margin-top: 14px;
		}
	}
}


</style>

<style>

</style>
